<template>
  <div class="app-container" data-tauri-drag-region  :class="{ 'fade-out': isFadingOut,'fade-in': isFadingIn }"
    @contextmenu.stop.prevent="openMenu" @click="contextMenuVisible=false">
    <div data-tauri-drag-region class="titlebar">
      <div class="titlebar-button" id="titlebar-minimize">
        <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize"/>
      </div>
      <div class="titlebar-button" id="titlebar-maximize">
        <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize"/>
      </div>
      <div class="titlebar-button" id="titlebar-close">
        <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
      </div>
    </div>
    <div class="app-list" data-tauri-drag-region>
      <div class="app-item" @mouseover="hoverIndex = index" @mouseleave="hoverIndex=null"
            @click="open(item)" v-for="(item, index) in appIconList" :key="index"
            :style="hoverIndex === index?'box-shadow:0px 0px 7px 5px rgba(0, 0, 0, 0.4)':''">
        <span class="app-name">{{item.name}}</span>
      </div>
    </div>
    <div style="">
      <div class="copyright">
        powered by xiaoyao 联系QQ：657025171
      </div>
    </div>

    <!-- code here -->
    <div class="menu" v-if="contextMenuVisible"
         :style="{left:contextMenuLeft+'px',top:contextMenuTop+'px'}"
         style="position: absolute" @mouseleave="contextMenuVisible=false">
      <iconify-icon icon="mdi:reload"></iconify-icon>
      <ul class="menu-list">
        <li class="menu-item"><button class="menu-button">
          <img src="https://api.iconify.design/mdi:folder.svg" alt="新建文件夹" style="margin-right:10px;"/>新建文件夹</button></li>
        <li class="menu-item"><button class="menu-button" @click="read_hosts">
          <img src="https://api.iconify.design/mdi:reload.svg" alt="刷新" style="margin-right:10px;"/>刷新</button></li>
        <li class="menu-item"><button class="menu-button">
          <img src="https://api.iconify.design/mdi:settings.svg" alt="设置" style="margin-right:10px;"/>设置</button></li>
        <li class="menu-item"><button class="menu-button">
          <img src="https://api.iconify.design/mdi:card.svg" alt="更换壁纸" style="margin-right:10px;"/>更换壁纸</button></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable */
import IconifyIcon  from 'iconify-icon';
import {ref, onMounted } from 'vue'
import { message } from 'ant-design-vue';
import { invoke } from '@tauri-apps/api';
import { appWindow , WebviewWindow } from '@tauri-apps/api/window';
let isFadingOut = ref(false)
let isFadingIn = ref(false)
let hoverIndex = ref(null)
let appIconList = ref([])
let contextMenuVisible = ref(false)
let contextMenuTop = ref(0)
let contextMenuLeft = ref(0)
let path = "C:\\快捷键\\"
async function read_hosts() {
  // 注: `/etc/hosts` 为自定义路径，而非基本目录之一
  // const content = await invoke('my_read_file', { path: 'C:\\Users\\zhangpeng\\Desktop\\1.txt' });
  // console.log(content);

  const fileList = await invoke('get_files_in_directory', { path: path }).then(res=>{

    console.log(res)
    const app = []
    for(let item of res){
      let arr = item.split("#@#");
      let name = arr[0].replace(".lnk","")
      if(name.length < 20){
        app.push({"name":name, "linkPath": arr[1]})
      }
    }
    appIconList.value = app;

  });
}

read_hosts();


const open = async (item)=>{
  if(!item.linkPath.includes(".lnk")){
    message.error("非快捷方式不能执行！");
    return;
  }
  isFadingOut.value = true
  isFadingIn.value = false
  setTimeout(function(){
    document.getElementById('titlebar-minimize').click()
  },2000)
  setTimeout(function(){
    isFadingIn.value = true
    isFadingOut.value = false
  },2000)
  await invoke('open',{ path: item.linkPath })
  // const w2 = WebviewWindow.getByLabel("w2");
  // w2.minimize()
  console.log(WebviewWindow.getByLabel("w2"))

}
const openMenu = (e) => {
  contextMenuVisible.value = false;

  contextMenuVisible.value = true; //在这里控制右键菜单的打开
  contextMenuTop.value = e.pageY;
  if (e.pageY + 200 >= e.currentTarget.offsetHeight) {
    contextMenuTop.value = e.pageY - 180;
  }
  contextMenuLeft.value = e.pageX;
  if (e.pageX+200 >= e.currentTarget.offsetWidth) {
    contextMenuLeft.value = e.pageX - 200;
  }
}
const closeMenu = () => {
  contextMenuVisible.value=false
}

onMounted(() => {
  document.getElementById('titlebar-minimize').addEventListener('click', () => appWindow.minimize())
  document.getElementById('titlebar-maximize').addEventListener('click', () => appWindow.toggleMaximize())
  document.getElementById('titlebar-close').addEventListener('click', () => appWindow.close())
  console.log("onMounted------", document.getElementById('titlebar-close'));
})
</script>

<style lang="scss" scoped>
.app-container{
  height:97vh;
  overflow-y: hidden;
  overflow-x: hidden;
  background: linear-gradient(0deg, rgb(48, 207, 208) 0%, rgb(4, 118, 220) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 15px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.titlebar {
  height: 50px;
  /*background: #329ea3;*/
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 12px;
  left: 0;
  right: 5px;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin:0 7px;
}
.titlebar-button:hover {
  background: rgba(185, 204, 204, 0.5);
  border-radius: 12px;
}
.app-list{
  display:flex;
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  padding:10px;
  margin-top:17px;
  height:100vh;
  overflow-y: auto;
  overflow-x: auto;
}
.app-item{
  width:43%;
  padding:5px 8px;
  background: #f1f1f1;
  border-radius:10px;
  margin:3px 3px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;

}
.app-name{
  font-size:12px;overflow: hidden;
}
.fade-out {
  animation: fade-out 0.5s forwards;
}
.fade-in {
   animation: fade-in 0.5s forwards;
 }
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.copyright{
  text-align: center;
  position: absolute;bottom:15px;width:95%;font-size:12px;text-align: center
}

:root {
  --color-bg-primary: #d0d6df;
  --color-bg-primary-offset: #f1f3f7;
  --color-bg-secondary: #fff;
  --color-text-primary: #3a3c42;
  --color-text-primary-offset: #898c94;
  --color-orange: #dc9960;
  --color-green: #1eb8b1;
  --color-purple: #657cc4;
  --color-black: var(--color-text-primary);
  --color-red: #d92027;
}
.menu {
  width:200px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(#404040, 0.15);
}

.menu-list {
  margin: 0;
  display: block;
  width: 100%;
  padding: 8px;
  list-style: none;

  & + .menu-list {
    border-top: 1px solid #ddd;
  }
}

.menu-sub-list {
  display: none;
  padding: 8px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(#404040, 0.15);
  position: absolute;
  left: 100%;
  right: 0;
  z-index: 100;
  width: 100%;
  top: 0;
  flex-direction: column;
  // &:after {
  //   content: "";
  //   position: absolute;
  //   left: -12px;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   display: block;
  //   outline: 2px solid hotpink;
  // }
  &:hover {
    display: flex;
  }
}

.menu-item {
  position: relative;
}

.menu-button {
  font: inherit;
  border: 0;
  padding: 4px 8px;
  padding-right: 36px;
  width: 100%;
  border-radius: 8px;
  text-align: left;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--color-bg-secondary);

  &:hover {
    background-color: var(--color-bg-primary-offset);

    & + .menu-sub-list {
      display: flex;
    }

    svg {
      stroke: var(--color-text-primary);
    }
  }

  svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    stroke: var(--color-text-primary-offset);

    &:nth-of-type(2) {
      margin-right: 0;
      position: absolute;
      right: 8px;
    }
  }

  &--delete {
    &:hover {
      color: var(--color-red);

      svg:first-of-type {
        stroke: var(--color-red);
      }
    }
  }

  &--orange {
    svg:first-of-type {
      stroke: var(--color-orange);
    }
  }

  &--green {
    svg:first-of-type {
      stroke: var(--color-green);
    }
  }

  &--purple {
    svg:first-of-type {
      stroke: var(--color-purple);
    }
  }

  &--black {
    svg:first-of-type {
      stroke: var(--color-black);
    }
  }

  &--checked {
    svg:nth-of-type(2) {
      stroke: var(--color-purple);
    }
  }
}

// Codepen spesific styling - only to center the elements in the pen preview and viewport
//.container {
//  position: absolute;
//  top: 0;
//  left: 0;
//  right: 0;
//  bottom: 0;
//  width: 100%;
//  display: flex;
//  align-items: center;
//  justify-content: center;
//}

// End Codepen spesific styling

/*
!* 美化全局的滚动条 *!
::-webkit-scrollbar {
  width: 16px;
  height: 6px;
}
::-webkit-scrollbar-corner {
  display: block;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  //background-color: rgba(255, 255, 255, .8);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border-right-color: transparent;
  border-left-color: transparent;
  background-color: rgba(255, 255, 255, .5);
}*/

/* 为所有滚动条设置样式 */
::-webkit-scrollbar {
  width: 6px; /* 设置滚动条的宽度 */
  height: 12px; /* 设置滚动条的高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: rgba(241, 241, 241, .1); /* 设置轨道的背景颜色 */
  border-radius: 6px;
  border-right-color: transparent;
  border-left-color: transparent;
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .8); /* 设置滑块的背景颜色 */
  border-radius: 6px;
  border-right-color: transparent;
  border-left-color: transparent;
}

/* 当鼠标滑过滑块 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块hover状态的背景颜色 */
}

</style>
